<template>

  <button @click="addItem">添加项目</button>

  <button @click="removeItem">删除最后一项</button>

  

  <transition-group name="list" tag="ul">

    <li v-for="(item, index) in items" :key="item.id" 

        :class="{'new-item': item.isNew, 'removed-item': item.isRemoved}">

      {{ item.text }}

    </li>

  </transition-group>

</template>



<script setup>
   import { ref } from 'vue';

const items = ref([

  { id: 1, text: '项目1', isNew: false, isRemoved: false },

  { id: 2, text: '项目2', isNew: false, isRemoved: false }

]);



const addItem = () => {

  items.value.push({

    id: Date.now(),

    text: `项目${items.value.length + 1}`,

    isNew: true,

    isRemoved: false

  });

  setTimeout(() => {

    const lastItem = items.value[items.value.length - 1];

    if (lastItem) lastItem.isNew = false;

  }, 1000); // 1秒后移除新增状态

};



const removeItem = () => {

  if (items.value.length > 0) {

    const lastItem = items.value[items.value.length - 1];

    lastItem.isRemoved = true;

    setTimeout(() => {

      items.value = items.value.filter(item => !item.isRemoved);

    }, 1000); // 1秒后执行删除

  }

};

</script>



<style>

/* 列表基础动画 */

.list-enter-active, .list-leave-active {

  transition: all 0.5s ease;

}

.list-enter-from {

  opacity: 0;

  transform: translateX(30px);

}

.list-leave-to {

  opacity: 0;

  transform: translateX(-30px);

}



/* 状态样式 */

.new-item {

  background-color: #d4edda !important;

}

.removed-item {

  background-color: #f8d7da !important;

}

</style>